<template>
  <div>
    <van-nav-bar title="用户登录" :fixed="true"/>
    <div style="margin-top: 40px">
      <van-form @submit="onSubmit">
        <van-field
            v-model="user.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="user.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <div class="signupTips">
      <router-link to="/signup">没有账号去注册</router-link>
      <router-view></router-view>
    </div>

  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      user: {
        username: this.$store.state.signUsername === '' ? 'kunkun' : this.$store.state.signUsername,
        password: this.$store.state.signPassword === '' ? '123456' : ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.request.post("/api/user/login", this.user).then(res => {
        if (res.code === 1) {
          localStorage.setItem("user", JSON.stringify(res.data))
          //跳转页面
          this.$router.push("/home")
          this.$notify({
            type: 'success',
            message: '登录成功',
            duration: 1000
          })
        }
      })
    },
  }

}
</script>

<style lang="less" scoped>
.signupTips {
  a:hover{
    color: red;
  }
  a{
    color: #1989fa;
    margin-right: 20px;
  }
  display: flex;
  justify-content: right;
}
</style>